<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tableData"
      :scroll="{ y: true }"
      bordered
      style="width: 100%; height: auto"
      :loading="loading"
      :pagination="false"
    >
      <span slot="deviceIdsTxt" slot-scope="deviceIdsTxt">{{ devName }}{{ getSeiresDevsn(deviceIdsTxt) }}号</span>
      <span slot="efficiency" slot-scope="text">{{ (Number(text) * 100).toFixed(2) }}%</span>
      <a-space slot="currentActualOutput" slot-scope="text, record">
        <span>{{ Number(text).toFixed(2) }}</span>
      </a-space>
      <a-space slot="currentTheoryOutput" slot-scope="text, record">
        <span>{{ Number(text).toFixed(2) }}</span>
      </a-space>
      <a-space slot="shiftTheoryOutput" slot-scope="text, record">
        <span>{{ Number(text).toFixed(2) }}</span>
      </a-space>
      <a-space slot="salary" slot-scope="text, record">
        <span>{{ (Number(text) * 0.3).toFixed(2) }}</span>
      </a-space>
    </a-table>
  </div>
</template>

<script>
export default {
  props: {
    devName: {
      type: String,
      default: ''
    },
    scrollY: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: true
    },
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      columns: [
        {
          title: '挡车工汇总',
          dataIndex: 'realname',
          key: 'realname',
          customHeaderCell: column => ({
            style: 'cursor: pointer; font-weight: bold; text-decoration: underline; color: rgb(86, 168, 168);',
            on: {
              click: () => this.toggleWorker()
            }
          })
          // sorter: (a, b) => {
          //   // 自定义排序函数
          //   const aVal = a.realname.toLowerCase()
          //   const bVal = b.realname.toLowerCase()
          //   let aNum = '',
          //     bNum = ''

          //   // 提取数字部分
          //   const aNumMatch = aVal.match(/\d+/)
          //   if (aNumMatch) {
          //     aNum = aNumMatch[0]
          //   }
          //   const bNumMatch = bVal.match(/\d+/)
          //   if (bNumMatch) {
          //     bNum = bNumMatch[0]
          //   }

          //   // 先比较字母部分
          //   if (aVal.replace(/\d+/, '') !== bVal.replace(/\d+/, '')) {
          //     return aVal.localeCompare(bVal)
          //   }

          //   // 如果字母部分相同，再比较数字部分
          //   if (aNum !== bNum) {
          //     return parseInt(aNum, 10) - parseInt(bNum, 10)
          //   }

          //   // 如果都相同，则认为它们相等
          //   return 0
          // }
        },
        {
          title: '工号',
          dataIndex: 'workNo',
          key: 'workNo',
          sorter: (a, b) => {
            // 自定义排序函数
            const aVal = a.workNo.toLowerCase()
            const bVal = b.workNo.toLowerCase()
            let aNum = '',
              bNum = ''

            // 提取数字部分
            const aNumMatch = aVal.match(/\d+/)
            if (aNumMatch) {
              aNum = aNumMatch[0]
            }
            const bNumMatch = bVal.match(/\d+/)
            if (bNumMatch) {
              bNum = bNumMatch[0]
            }

            // 先比较字母部分
            if (aVal.replace(/\d+/, '') !== bVal.replace(/\d+/, '')) {
              return aVal.localeCompare(bVal)
            }

            // 如果字母部分相同，再比较数字部分
            if (aNum !== bNum) {
              return parseInt(aNum, 10) - parseInt(bNum, 10)
            }

            // 如果都相同，则认为它们相等
            return 0
          }
        },
        {
          title: '品种',
          dataIndex: 'productTypeTxt',
          key: 'productType',
          sorter: (a, b) => {
            // 自定义排序函数
            const aVal = a.productType.toLowerCase()
            const bVal = b.productType.toLowerCase()
            let aNum = '',
              bNum = ''

            // 提取数字部分
            const aNumMatch = aVal.match(/\d+/)
            if (aNumMatch) {
              aNum = aNumMatch[0]
            }
            const bNumMatch = bVal.match(/\d+/)
            if (bNumMatch) {
              bNum = bNumMatch[0]
            }

            // 先比较字母部分
            if (aVal.replace(/\d+/, '') !== bVal.replace(/\d+/, '')) {
              return aVal.localeCompare(bVal)
            }

            // 如果字母部分相同，再比较数字部分
            if (aNum !== bNum) {
              return parseInt(aNum, 10) - parseInt(bNum, 10)
            }

            // 如果都相同，则认为它们相等
            return 0
          }
        },
        {
          title: '车台号',
          dataIndex: 'deviceIdsTxt',
          key: 'deviceIdsTxt',
          scopedSlots: { customRender: 'deviceIdsTxt' },
          sorter: (a, b) => {
            // 自定义排序函数
            const aVal = a.deviceIdsTxt.toLowerCase()
            const bVal = b.deviceIdsTxt.toLowerCase()
            let aNum = '',
              bNum = ''

            // 提取数字部分
            const aNumMatch = aVal.match(/\d+/)
            if (aNumMatch) {
              aNum = aNumMatch[0]
            }
            const bNumMatch = bVal.match(/\d+/)
            if (bNumMatch) {
              bNum = bNumMatch[0]
            }

            // 先比较字母部分
            if (aVal.replace(/\d+/, '') !== bVal.replace(/\d+/, '')) {
              return aVal.localeCompare(bVal)
            }

            // 如果字母部分相同，再比较数字部分
            if (aNum !== bNum) {
              return parseInt(aNum, 10) - parseInt(bNum, 10)
            }

            // 如果都相同，则认为它们相等
            return 0
          }
        },
        {
          title: '效率(%)',
          dataIndex: 'efficiency',
          key: 'efficiency',
          scopedSlots: { customRender: 'efficiency' },
          sorter: (a, b) => Number(a.efficiency) - Number(b.efficiency)
        },
        {
          title: '当前实际产量(kg)',
          dataIndex: 'currentActualOutput',
          key: 'currentActualOutput',
          scopedSlots: { customRender: 'currentActualOutput' },
          sorter: (a, b) => Number(a.currentActualOutput) - Number(b.currentActualOutput)
        },
        {
          title: '当前理论产量(kg)',
          dataIndex: 'currentTheoryOutput',
          key: 'currentTheoryOutput',
          scopedSlots: { customRender: 'currentTheoryOutput' },
          sorter: (a, b) => Number(a.currentTheoryOutput) - Number(b.currentTheoryOutput)
        },
        {
          title: '整班理论产量(kg)',
          dataIndex: 'shiftTheoryOutput',
          key: 'shiftTheoryOutput',
          scopedSlots: { customRender: 'shiftTheoryOutput' },
          sorter: (a, b) => Number(a.shiftTheoryOutput) - Number(b.shiftTheoryOutput)
        },
        {
          title: '工时（小时）',
          dataIndex: 'workHours',
          key: 'workHours',
          sorter: (a, b) => Number(a.workHours) - Number(b.workHours)
        },
        {
          title: '工资',
          dataIndex: 'salary',
          key: 'salary',
          scopedSlots: { customRender: 'salary' },
          sorter: (a, b) => Number(a.salary) - Number(b.salary)
        }
      ]
    }
  },
  methods: {
    toggleWorker() {
      console.log('detail')
      this.$emit('toggle', 'detail')
    },
    // 获取连续车台
    getSeiresDevsn(arr) {
      arr = arr.split(',')
      var result = [],
        i = 0,
        str = ''
      if (arr.length > 0) {
        result[i] = [arr[0]]
        arr.reduce(function(prev, cur) {
          parseInt(cur) - parseInt(prev) === 1 ? result[i].push(cur) : (result[++i] = [cur])
          return cur
        })
        result.map(item => {
          if (item.length > 1) {
            str += `${item[0]}-${item[item.length - 1]}、`
          } else {
            str += `${item[0]}、`
          }
        })
        str = str.substring(0, str.length - 1)
      } else {
        str = ''
      }
      return str
    }
  }
}
</script>

<style lang="less" scoped></style>
